<template>
  <Card>
    <Row slot="title" type="flex" justify="start" align="top" class-name="ctrlArea">
      <RadioGroup v-model="traceCtrl" type="button" >
        <Radio label="paly">
          <Icon type="md-play" />
        </Radio>
        <Radio label="pause">
          <Icon type="md-pause" />
        </Radio>
        <Divider type="vertical" />
      </RadioGroup>
      <RadioGroup v-model="getShowType" type="button">
        <Radio label="Hex">HEX</Radio>
        <Radio label="Ascll">ASCLL</Radio>
        <Divider type="vertical" />
      </RadioGroup>
      <div style="line-height:32px">
        区分:
        <i-switch
          true-color="#13ce66"
          false-color="#ff4949"
          size="large"
          v-model="colorSwitch"
        >
          <span slot="open">开</span>
          <span slot="close">关</span>
        </i-switch>间隔:
        <InputNumber
          :max="1000"
          :min="10"
          v-model="getReadTimer"
          :formatter="value => `${value}ms`"
          :parser="value => value.replace('ms', '')"
          @on-blur="handleReadTimer"
        ></InputNumber>
        <Divider type="vertical" />
      </div>
      <ButtonGroup>
        <Button @click="handleLogSave">保存</Button>
        <Button @click="handleLogClean">清空</Button>
      </ButtonGroup>
    </Row>
    <Scroll :height="getTopHeight">
      <List :split="false">
        <ListItem v-for="(item,index) in getTraceList">
          <li :style="{color:getColorInfo(item)}">{{item.text}}</li>
        </ListItem>
      </List>
    </Scroll>
  </Card>
</template>
<script>
import SHUFFLE from "lodash/shuffle";
import HASIN from "lodash/hasIn";
import FIND from "lodash/find";
import REDUCE from "lodash/reduce";
import FILTER from "lodash/filter"
import MOMENT from "moment";

import ExportLog from "@/utils/export-log";
import Log from "@/utils/log";
export default {
  data() {
    return {
      traceList: [],
      timerVal: 10,
      traceCtrl: "paly",
      showType: "Hex",
      colorInfo: [
        "#515a6e",
        "#2D8CF0",
        "#19BE6B",
        "#FF9900",
        "#ED4014",
        "#00B5FF",
        "#19C919",
        "#F9E31C",
        "#EA1A1A",
        "#9B1DEA",
        "#00C2B1",
        "#AC7A33",
        "#1D35EA",
        "#8BC34A",
        "#F16B62",
        "#0D94AA",
      ],
      mesColor: {},
      colorSwitch: false,
    };
  },
  computed: {
    getTopHeight: function () {
      return this.$store.getters.getTopHeight - 158;
    },
    getMesColor: function () {
      let color = this.colorInfo;
      return REDUCE(
        this.$store.getters.getCurPorts,
        function (result, value, key) {
          let index = (key + 1) * 2;
          result[value.path] = [color[index - 1], color[index]];
          return result;
        },
        {}
      );
    },
    getColorInfo: function () {
      return (item) => {
        if (this.colorSwitch) {
          if (item.type == "Tx") {
            return this.getMesColor[item.port][1];
          } else if (item.type == "Rx") {
            return this.getMesColor[item.port][0];
          } else {
            return this.colorInfo[0];
          }
        } else {
          return this.colorInfo[0];
        }
      };
    },
    getTraceList: function () {
      if (this.traceCtrl == "paly") {
        this.traceList.push(this.$store.getters.getMessage);
      }
      return this.traceList;
    },
    getReadTimer:{
     get() {
      return this.$store.getters.getReadTimer;
    },
    set(value) {
      this.$store.commit('UPPER_READ_TIMER',value)
    }
  },
  getShowType:{
    get() {
      return this.$store.getters.getShowType
    },
    set(type){
      this.$store.commit('UPPER_SHOW_TYPE',type)
    }
  }
  },
  watch: {
    traceList: "scrollToBottom",
  },
  methods: {
    handleLogClean() {
      this.traceList = []
    },
    scrollToBottom: function () {
      this.$nextTick(() => {
        let divTbl = document.getElementsByClassName("ivu-scroll-container");
        divTbl[0].scrollTop = divTbl[0].scrollHeight;
      });
    },
    exportLog(params) {
      if (params.filename) {
        if (params.filename.indexOf(".log") === -1) {
          params.filename += ".log";
        }
      } else {
        params.filename = "new.log";
      }

      const data = Log(this.traceList,params);
      if (params.callback) params.callback(data);
      else ExportLog.download(params.filename, data);
    },
    handleLogSave(){
      this.exportLog({})
    },
    handleReadTimer(){
      let ports = FILTER(Object.values(this.$store.getters.getCurPorts), "open")
      if(ports){
        ports.forEach(port => {
          console.log('test')
        this.$store.dispatch("reqPortReadMessage",port.path);
      });
      }
    },
  },
  mounted() {
    this.scrollToBottom();
  },
};
</script>
<style>
.ctrlArea {
  min-width: 700px;
}
</style>